<template>
	<view>
		<!-- 头部导航 -->
		<view class="tabbbar">
		  <text class="quxiaojiantou"><</text>
		  <text class="tabtext">个人信息</text>
		</view>
    
    <!-- 个人信息详情 -->
    <view class="username">
     <view class="List">
       <text class="caiList">头像</text>
      <view class="touxiang">
        <image src="../img/lvzhuan.png" mode=""></image>
      </view>
     </view>
     
     
     <view class="List">
       <text class="caiList">昵称</text>
       <view class="niname">
         <text class="nickname">袁大宝</text>
         <image src="./img/you.png" mode="" class="caiyou"></image>
       </view>
     </view>
     
     <view class="List">
       <text class="caiList">性别</text>
       <view class="niname">
         <text class="nickname">女</text>
         <image src="./img/you.png" mode="" class="caiyou"></image>
       </view>
     </view>
     
     <view class="List">
       <text class="caiList">手机号</text>
       <view class="niname">
         <text class="nickname">15909899010</text>
         <image src="./img/you.png" mode="" class="caiyou"></image>
       </view>
     </view>
     
     
     <view class="List">
       <text class="caiList">我的收藏</text>
       <view class="niname">
         <text class="nickname"></text>
         <image src="./img/you.png" mode="" class="caiyou"></image>
       </view>
     </view>
     
     <view class="List">
       <text class="caiList">登陆密码</text>
       <view class="niname">
         <text class="nickname">设置</text>
         <image src="./img/you.png" mode="" class="caiyou"></image>
       </view>
     </view>
    </view>
    
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
  /* tabbar */
.tabbbar {
  width: 100%;
  height: 116rpx;
  background: linear-gradient(90deg, #C8F979 13%, #E6FAC5 45%, #DAFBA7 75%, #9CD14C 100%);
  opacity: 0.3;
  

}
.quxiaojiantou {
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
      line-height: 114rpx;
      margin-left: 50rpx;
}
.tabtext {
  width: 70rpx;
  height: 34rpx;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;

 margin-left: 230rpx;
}
/* 个人信息卡片视图 */
.username {
  margin: 42rpx auto auto auto;
  width: 690rpx;
  height: 864rpx;
  background: #FFFFFF;
  box-shadow: 0px 5rpx 40rpx 0px rgba(192, 192, 192, 0.33);
  border-radius: 20rpx;

}
.List {
    width: 650rpx;
    height: 130rpx;
    border-bottom: 1px solid #F5F5F5;
    margin-left: 20rpx;
     line-height: 130rpx;
  }
  .List:nth-child(1) {
    height: 188rpx;
    line-height: 198rpx;
  }
  .List:nth-child(6) {
    height: 153rpx;
    line-height: 153rpx;
  }
  .List:nth-child(6){
    border: none;
  }
  .caiList {
    float: left;
  
   height: 30rpx;
   font-size: 32rpx;
   font-family: PingFang SC;
   font-weight: 500;
   color: #333333;
   

    }
    
    .touxiang {
      float: right;
      width: 124rpx;
      height: 124rpx;
      margin-top: 32rpx;
    }
    .touxiang  image {
      width: 124rpx;
      height: 124rpx;
      border-radius: 50%;
    }  
   .niname {
      float: right;
    }
    .caiyou {
      margin-top: 46rpx;     
      width: 10rpx;
      height: 17rpx;      
    }
    .nickname {
      padding-right: 29rpx;
     
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 40rpx;

    }
    
</style>
